<template>
  <div class="page-home">
    <div class="search_box" :class="{ 'search_result_box': isSearch }">
      <h2 v-if="!isSearch">{{ projectTitle }}</h2>
      <a-input-search
        size="large"
        enter-button="搜索"
        v-model="value"
        @search="onSearch"
        allowClear
        :class="{ 'cust-input-search': !isSearch }"
        :placeholder="'请输入'+ (!isSearch?'账户名称':'')" 
      />
      <div class="tip_box" v-if="isSearch">精确搜索、关键字模糊匹配，为您提供智能搜索功能</div>
      <div class="tags_box" v-if="isSearch">
        <span>数据来源：</span>
        <a-checkable-tag :checked="checkAllState" @change="checked => handleAllChange()">全部</a-checkable-tag>
        <template v-for="tag in dictOptions">
          <a-checkable-tag
            :key="tag.value"
            :checked="selectedTags.indexOf(tag.value) > -1"
            @change="checked => handleChange(tag.value, checked)"
          >
            {{ tag.title }}
          </a-checkable-tag>
        </template>
      </div>
    </div>
    <search-page v-model="value" v-if="!isSearch" />
    <search-result-page ref="searchResult" v-model="value" :sourceType="selectedTags" v-else />
  </div>
</template>

<script>
import { getDictItemsFromCache } from '@/api/api'
import searchPage from './searchPage.vue'
import searchResultPage from './searchResultPage.vue'
export default {
  name: 'Home',
  components: {
    searchPage, 
    searchResultPage
  },
  data() {
    return {
      isSearch: false,
      projectTitle: process.env.VUE_APP_PLATFORM_NAME,
      dictOptions: getDictItemsFromCache('dataSource'), //数据来源-字典值
      selectedTags: [],
      value: null
    }
  },
  computed: {
    checkAllState() {
      let bool = false
      let dissuadeStatus = this.selectedTags
      if ((this.dictOptions && this.dictOptions.length) === dissuadeStatus.length) {
        bool = true
      }
      return bool
    }
  },
  mounted() {
    this.selectedTags = this.dictOptions.map(v => { return v.value })
  },
  methods: {
    onSearch(value) {
      if(value) this.isSearch = true
      this.$nextTick(()=>{
        if(this.isSearch) this.$refs.searchResult.onQuery()
      })
    },
    // 选择全部
    handleAllChange() {
      if(this.checkAllState) {
        this.selectedTags = []
      } else {
        this.selectedTags = this.dictOptions.map(v => { return v.value })
      }
    },
    // 选择单项
    handleChange(tag, checked) {
      const { selectedTags } = this;
      const nextSelectedTags = checked
        ? [...selectedTags, tag]
        : selectedTags.filter(t => t !== tag);
      this.selectedTags = nextSelectedTags;
    }
  }
}
</script>
<style lang="less" scoped>
.search_box {
  height: 380px;
  background-image: url('~@/assets/home_search.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  h2 {
    color: #ffffff;
    font-size: 50px;
    font-family: 'jjcjh';
    // font-weight: 600;
    margin-top: 0;
  }
  .cust-input-search {
    /deep/&.ant-input-search {
      width: 40%;
    }
    /deep/.ant-input-lg {
      border-radius: 40px 0 0 40px;
      height: 50px;
    }
    /deep/.ant-btn-lg {
      border-radius: 0 40px 40px 0;
      padding-left: 30px;
      padding-right: 30px;
      font-size: 24px;
      height: 50px;
    }
    /deep/.ant-input-group-addon {
      background-color: inherit;
    }
  }
  &.search_result_box {
    height: auto;
    padding: 20px;
    background-image: inherit;
    background-color: #ffffff;
    align-items: flex-start;
    /deep/.ant-input-group-wrapper {
      width: 40%;
    }
  }
  .tip_box {
    padding: 16px 0;
  }
  .tags_box {
    width: 100%;
    padding-top: 16px;
    border-top: 1px dashed #ccc;
  }
}
</style>